<template>
  <div class="Mytag">
    <input v-focus :value="value" ref="inp" v-if="edit" @blur="edit=false" @keyup.enter="changeTag" type="text">
    <span v-else @dblclick="editTagActive()">{{value}} </span>
  </div>
</template>

<script>
export default {
  name: 'MyTag',
  props: {
    value:String
  },
  data() {
    return {
      edit:false
    }
  },
  methods: {
    changeTag(e){
      if (e.target.value) {
        this.$emit("input",e.target.value)
        this.edit=false
      }
    },
    editTagActive(){
      this.edit=true
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .Mytag{
  position: relative;
 }
</style>
